<template>
  <div class="information">
    <van-nav-bar
      :title="$t('person.help')"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group>
      <van-cell
        v-for="(item, index) of list"
        :key="'item' + index"
        @click="onjump(item)"
      >
        <template #title>
          <span class="circle"></span>
          <span class="custom-title">{{ index + 1 }}、{{ item.name }}</span>
        </template>
        <template #value>
          <img
            src="@/assets/images/person/next.png"
            alt=""
            class="custom-next"
          />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script setup>
import { helpTypeList } from "@/api/user";
import { onMounted } from "vue";
import { ref, reactive } from "@vue/reactivity";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
import { useI18n } from "vue-i18n";
import { Toast } from "vant";
const { t } = useI18n();
let loading = ref(false);
const data = reactive({
  name: "Tom",
});
const list = reactive([]);
const oldList = reactive([]);
onMounted(async () => {
  let res = await helpTypeList().catch((err) => Toast(err));
  Object.assign(list, res.data);
});
function onClickLeft() {
  if (oldList.length !== 0) {
    list.length = 0;
    list.push(...oldList);
    oldList.length = 0;
  } else {
    history.back();
  }
}
function onjump(val) {
  // router.push({ path: "/helplist", query: { id: val.id, name: val.name } });
  console.log(val);
  if (val.child.length !== 0) {
    oldList.length = 0;
    oldList.push(...list);
    list.length = 0;
    list.push(...val.child);
    console.log(oldList);
  } else {
    router.push({ path: "/helpdetail", query: { ...val } });
  }
  // router.push({ path: "/helpdetail", query: { ...val } });
}
</script>

<style lang="less" scoped>
.information {
  .van-nav-bar__title.van-ellipsis {
    font-size: 18px;
  }
  .circle {
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #ed008c;
    border-radius: 50%;
    position: relative;
    top: -2px;
  }
  .custom-title {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #454a4a;
    line-height: 14px;
    margin-left: 8px;
  }
  .custom-next {
    width: 8px;
    height: 13px;
    margin-left: 10px;
    position: relative;
    top: 2px;
  }
  :deep(.van-cell:after) {
    border-bottom: 1px solid #e6e6e6;
  }
}
</style>
